<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script>
<script type="text/javascript" src="/js/mac/core.min.js"></script>
<title>JQuery MagicCombo Grid多选示例</title>
<meta name="description" content="JQuery MagicCombo Grid多选示例" />
<meta name="keywords" content="JQuery ComboBox Plugin" />
<!-- <link href="/src/css/default/mac/combo/combo.css" type="text/css" rel="stylesheet" /> -->
<!-- <script type="text/javascript" src="/src/js/mac/combo.js"></script> -->
<link href="/css/default/mac/combo/combo.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/combo.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#nav_jump').change(function(){
		location = './' + this.value + '.html';
	}).val('grid2');
	$('.demoSource').val($('#demo').html());
});
</script>
</head>
<body>
<div id="head">
	<a href="/"><img src="/css/images/logo_s.png" alt="logo" /></a>
	<div class="title">BOARSOFT.COM</div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://activemq.apache.org/" target="_blank">ActiveMQ</a>
			|
			<a href="https://redis.io/" target="_blank">Redis</a>
			|
			<a href="http://www.jquery.com/" target="_blank">JQuery</a>
		</div>
	</div>
</div><div id="nav">
	<div id="nav_path">
		&nbsp;<a href="/">Home</a>
		&gt;
		<a href="/mac/js/combo">JQuery MagicCombo</a>
		&gt;
		JQuery MagicCombo Grid多选示例	</div>
	<div id="nav_back">
		<a href="/mac/js/combo/doc">文档</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/mac/js/combo/dl/grid2.html">下载</a>
		|
		<select id="nav_jump">
			<option value="basic">JQuery MagicCombo 下拉框基本功能示例</option>
			<option value="remote">JQuery MagicCombo 远程加载数据示例</option>
			<option value="custom">JQuery MagicCombo 自定义样式示例</option>
			<option value="grid1">JQuery MagicCombo Grid单选示例</option>
			<option value="grid2">JQuery MagicCombo Grid多选示例</option>
			<option value="autoCp">JQuery MagicCombo Auto Complete 示例</option>
		</select>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle">JQuery MagicCombo Grid多选示例</h2>
</div>
<div id="demo" class="demoPanel"><link href="/css/default/mac/grid/grid.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery/mousewheel.js"></script>
<script type="text/javascript" src="/js/mac/pager.min.js"></script>
<script type="text/javascript" src="/js/mac/grid.min.js"></script>
<script type="text/javascript">
$(function(){
	var gd2 = $('<div class="grid"></div>').mac('grid', {
		key: 'no',
		cols : [{
			field: 'subject', title : 'Subject', width: 150
		},{
			field: 'summary', title : 'Summary', width: 150
		},{
			field: 'debit', title : 'Debbit', width: 80, sort: true,
			render: function(r, tr){
				return '<div class="money">$'+r.debit+'</div>';
			}
		},{
			field: 'credit', title : 'Credit', width: 80, sort: true,
			render: function(r, tr){
				return '<div class="money">$'+r.credit+'</div>';
			}
		}],
		loader: {
			url: '/mac/js/grid/data.php',
			params: { pageNo: 1, pageSize: 20 },
			autoLoad: true
		},
		pagerLength: 10,
		onRowClick: function(){
			var ec = $(this), k = ec.attr('name');
			if(gd2.selected && ec.hasClass('selected')){
				delete gd2.selected[k];
				ec.removeClass('selected');
			}else{
				gd2.selected = gd2.selected || {};
				gd2.selected[k] = gd2.data[k];
				ec.addClass('selected');
			}
			var sl = [];
			$.each(gd2.selected, function(n, c){
				sl.push(c);
			});
			cb2.select(sl);
		},
		afterLoad: function(dd, po){
			gd2.select(cb2.selected);
		}
	});
	gd2.select = function(sl){
		var at = gd2.find('.tr').removeClass('selected');
		$.each(sl, function(n, r){
			at.filter("[name='" + r.no + "']").addClass('selected');
		});
	}
	var cb2 = $('#combo2').mac('combo', {
		keyField: 'no',
		displayField: 'subject',
		boxWidth: 490,
		boxHeight: 300,
		width: 200,
		boxEl: gd2,
		multiSelect: true,
		onOpen: function(){
			gd2.adjust();
			gd2.select(cb2.selected);
		}
	});
	$('#get2').click(function(){
		alert(JSON.stringify(cb2.selected));
	});
	$('#set2').click(function(){
		cb2.select([{
			no: 2, subject: 'Subject 002'
		},{
			no: 4, subject: 'Subject 004'
		}]);
	});
});
</script>
<div id="combo2" class="combo customCombo"></div><br/>
&nbsp;&nbsp;<button id="get2">get2</button>&nbsp;<button id="set2">set2</button></div>
<textarea class="demoSource" wrap="off"></textarea>
<iframe src="/mac/js/related.php" class="related"></iframe>
<div id="foot">
Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
QQ: 7213571&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!-- 
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
&nbsp;&nbsp;
 -->
</div></body>
</html>
